<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vConsole Network测试</title>
    <script src="https://unpkg.com/vconsole@3.15.1/dist/vconsole.min.js"></script>
</head>
<body>
    <h1>vConsole Network面板测试</h1>
    <button onclick="testNetwork()">发送测试请求</button>
    <button onclick="showVConsole()">显示vConsole</button>
    <button onclick="checkVConsole()">检查vConsole状态</button>

    <script>
        // 初始化vConsole
        let vconsole = new VConsole({
            theme: 'dark',
            defaultPlugins: ['system', 'network', 'element', 'storage'],
            maxLogNumber: 1000
        });

        console.log('vConsole已初始化');

        function showVConsole() {
            if (vconsole) {
                vconsole.show();
                console.log('vConsole显示命令已发送');
            } else {
                console.error('vConsole未初始化');
            }
        }

        function checkVConsole() {
            console.log('vConsole实例:', vconsole);
            console.log('vConsole插件:', vconsole?.pluginList);
            console.log('当前URL:', window.location.href);
            console.log('UserAgent:', navigator.userAgent);
        }

        async function testNetwork() {
            console.log('开始发送测试请求...');
            
            try {
                // 测试GET请求
                const response1 = await fetch('https://jsonplaceholder.typicode.com/posts/1');
                const data1 = await response1.json();
                console.log('GET请求成功:', data1);
                
                // 测试POST请求
                const response2 = await fetch('https://jsonplaceholder.typicode.com/posts', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        title: 'vConsole测试',
                        body: '这是vConsole Network面板测试',
                        userId: 1
                    })
                });
                const data2 = await response2.json();
                console.log('POST请求成功:', data2);
                
                // 测试本地API请求
                const response3 = await fetch('/api/test');
                console.log('本地API请求状态:', response3.status);
                
            } catch (error) {
                console.error('请求失败:', error);
            }
        }

        // 自动显示vConsole
        setTimeout(() => {
            console.log('5秒后自动显示vConsole...');
            vconsole.show();
        }, 5000);

        // 检查Network插件
        setTimeout(() => {
            console.log('检查Network插件...');
            console.log('可用插件:', Object.keys(vconsole.pluginList || {}));
        }, 1000);
    </script>
</body>
</html>